<template>
	<!-- 添加商品 -->
	<view class="apply-pages" v-if="isLoad">
		
		<view class="apply-form pl-lg pr-lg">
			<view class="fill-base mt-md radius-16">
				<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text">行业</view>
					<view class="item-input text">
					   <picker @change="industryChange" :value="industryIndex" :range="industryList" range-key="name">
							<view style="height: 19px;line-height: 19px;">{{ industryList[industryIndex].name }}</view>
						</picker>
					</view>
				</view> -->
				<view v-if="false" class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text">分类</view>
					<view class="item-input text">
						<picker mode="selector" range-key="gc_name" @change="colChange" :range="classList">
							<view style="height: 19px;line-height: 19px;">
						        {{form.one_classid_name }}
						    </view>
						</picker>
					</view>
				</view>
				<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text">绑定门店</view>
					<view class="item-input text">
						<picker @change="shopChange" :value="index" :range="shopListName">
							<view style="height: 20px;line-height: 20px;">
							    {{shop_name||'请选择'}}
							</view>
						</picker>
					</view>
				</view> -->
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>名称</view>
					<input v-model="form.name" type="text" class="item-input flex-1" maxlength="20"
						:placeholder="rule[0].errorMsg" />
				</view>
				<view v-if='false' class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">副标题</view>
					<input v-model="form.subheading" type="text" class="item-input flex-1" maxlength="20"
						placeholder="请输入副标题" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>配送方式</view>
					<checkbox-group v-model="form.shipping_type"  @change="checkboxChange">
					  <label>  
					    <checkbox value="2" :checked="take"  style="margin: 5px;">到店自取</checkbox> 
					  </label>  
					  <label >
					    <checkbox value="1" :checked="delivery"  style="margin: 5px;">快递到家</checkbox> 
					  </label>
					</checkbox-group>
					 
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>商品原价</view>
					<input v-model="form.original_price" type="digit" class="item-input flex-1"
						placeholder="请输入商品原价" @input="legumeauto"/>
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">展示价格</view>
					<input v-model="form.present_price" readonly disabled="disabled" type="text" class="item-input"
						placeholder="展示价格自动计算" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text" style="margin-left: 50rpx;"><text style="color:aquamarine">|____</text><text style="color: red;">*</text>商品成本</view>
					<input v-model="form.cost_price" @input="legumeauto3" type="digit" class="item-input flex-1"
						placeholder="请输入商品成本" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text" style="margin-left: 50rpx;"><text style="color:aquamarine">|____</text> 运营A</view>
					<input v-model="form.commission1" @input="legumeauto3" type="digit" class="item-input flex-1"
						placeholder="请输入运营A佣金" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text" style="margin-left: 50rpx;"><text style="color:aquamarine">|____</text> 运营B</view>
					<input v-model="form.commission2" @input="legumeauto3" type="digit" class="item-input flex-1"
						placeholder="请输入运营B佣金" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text" style="margin-left: 50rpx;"><text style="color:aquamarine">|____</text> 分享佣金</view>
					<input v-model="form.share_money" @input="legumeauto3" type="digit" class="item-input flex-1"
						placeholder="请输入分享佣金" />
						<view class="item-text">元</view>
				</view>
			
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">幸福豆</view>
					<input v-model="form.preferential_price" type="text" class="item-input flex-1"
						placeholder="数量自动核算" disabled />
						<view class="item-text" style="width: 106px;">返利商家{{threehbean}}幸福豆</view>
						
				</view>
				<!-- <view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">销售量</view>
					<input v-model="form.sale_nums" type="digit" class="item-input flex-1"
						placeholder="请输入销售量        输入已经销售的数量。    1-50单数量" />
						<button @tap.stop="addCommission()" class="clear-btn order">添加销售返佣</button>
				</view> -->
			
				<!-- <view v-for="(cosn, index) in commission" :key="cosn.id" class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">销售返佣</view>
					<input v-model="commission[index].text" type="text" class="item-input flex-1"
						placeholder="请输入销售者和金额"/>
						<view class="item-text">例如:小刘=100</view>
				</view> -->
				<!-- <view class="flex-between ml-lg mr-lg b-1px-b radio-content">
					<view class="item-text">到店核销消费</view>
					<view class="radio-content" @click="changeRadio1">
						<view class="radio" :class="form.verify_arrival == 1 ? 'radio-default':''">
							<view :class="form.verify_arrival == 1 ? 'radio-active':''"></view>
						</view>
						<text>到店消费</text>
					</view>
					<view class="radio-content radio-right" @click="changeRadio2">
						<view class="radio" :class="form.verify_arrival == 2 ? 'radio-default':''">
							<view :class="form.verify_arrival == 2 ? 'radio-active':''"></view>
						</view>
					  <text>到家服务</text>
					</view>
				</view> -->
				<!-- <view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">排序值</view>
					<input v-model="form.sort" type="number" class="item-input flex-1"
						placeholder="值越大,排序越靠前" />
				</view> -->
			
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text"><text style="color: red;">*</text>封面图</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.thumbs" filetype="picture"
						imgtype="thumbs" text="上传图片" :imgsize="5">
					</upload>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text"><text style="color: red;">*</text>展示图</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload2" @del="imgUpload2" :imagelist="pictures_photo" filetype="picture"
						imgtype="pictures" text="上传图片" :imgsize="10">
					</upload>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.content" class="item-textarea pd-lg" maxlength="300" style="height:400rpx;" placeholder="请输入项目介绍" />
					<view class="text-right pb-lg pr-lg">
						{{form.content.length>300?300:form.content.length}}/300
					</view>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.taboo" class="item-textarea pd-lg" maxlength="100" placeholder="请输入特别说明" />
					<view class="text-right pb-lg pr-lg">
						{{form.taboo.length>100?100:form.taboo.length}}/100
					</view>
				</view>
			</view>
			<view v-if="false" class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.needtoknow" class="item-textarea pd-lg" maxlength="100" placeholder="请输入下单须知" />
					<view class="text-right pb-lg pr-lg">
						{{form.needtoknow.length>100?100:form.needtoknow.length}}/100
					</view>
				</view>
			</view>
			
		</view>

		<view class="space-max-footer"></view>

		<fix-bottom-button @cancel="toDel" @confirm="submit" :text="textArr" bgColor="#fff"></fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import $api from '@/api/index.js';
	export default {
		components: {},
		data() {
			return {
				take:true,
				delivery:true,
				isLoad: false,
				take1:2,
				delivery1:1,
				options: {},
				textArr: [{
					text: '删除',
					type: 'cancel'
				}, {
					text: '提交',
					type: 'confirm'
				}],
				shopList:[
					{
						
					}
				],
				form: {
					goodsid: 0,
					name: '',
					subheading: '',
					present_price: '',
					original_price: '',
					preferential_price:'',
					happy_bean: '',
					cost_price:'',
					commission1:'',
					commission2:'',
					share_money:'',
					verify_arrival: '',
					rebate: '',
					sale_nums: '',
					sort: '',
					content: '',
					taboo: '',
					shipping_type:0,
					needtoknow: '',
					one_classid: '6',
					one_classid_name: '请选择',
					two_classid: '272',
					two_classid_name: '真诚',
					thumbs: '', // 封面图
					pictures: [] ,// 展示图
				},
				shop_name:'',
				threehbean:0,
				industryIndex: 3,
				industryList: [{
						id: 0,
						name: "门店",
					},
					{
						id: 1,
						name: "服务",
					},
					{
						id: 2,
						name: "成长",
					},
					{
						id: 3,
						name: "乐购",
					}
				],
				pictures_photo: [], // 展示图
				rule: [{
						name: "name",
						checkType: "isNotNull",
						errorMsg: "请输入名称",
						regType: 2
					},
				],
				lockTap: false,
				className: '',
				classList1: [
				
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
				],
				classList2: [],
				classList: [],
				commission: [],
				shopList: [],
				shopListName: []
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		onLoad(options) {
			this.options = options
			console.log('options')
			console.log(options)
			this.initIndex()
			this.getShopList()
		},
		methods: {
			async initIndex() {
				let {
					goodsid
				} = this.options
				uni.setNavigationBarTitle({
					title: goodsid ? `编辑商品` : `添加商品`
				})
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				
				// this.classList[0] = this.classList1
				// 强制视图更新
				// this.$set(this.classList, 0, this.classList1)
				let list = await this.$api.service.classList({
					class_id: 0
				});
				
				this.classList = list
				// debugger
				// 强制视图更新
				// this.$set(this.classList, 1, list)
				
				this.goodsid = goodsid
				if (!goodsid) {
					this.textArr.splice(0, 1)
					this.isLoad = true
					return
				}
				await this.getDetail()
			},
			async getShopList(){
				let res = await this.$api.service.getShopList()
				this.shopList = res
				this.shopList.forEach((item, index) => {
					this.shopListName.push(item.name)
				})
				
				console.log(res,this.shopList)
			},
			async shopChange(e) {
				this.form.shop_id = this.shopList[e.detail.value].id
				this.shop_name = this.shopList[e.detail.value].name
				console.log(this.form)
			},
			async getDetail() {
				let {
					goodsid
				} = this.options
				let detail = await this.$api.mine.getGoodsDetails({
					goodsid
				});
				// debugger
				for(let iii=0;iii<detail.thumbs.length;iii++)
				{
					detail.thumbs[iii] = {path:detail.thumbs[iii]}
				}
				this.pictures_photo = []
				for (var i = 0; i < detail.pictures.length; i++) {
					var item = detail.pictures[i]
					this.pictures_photo.push({path: item})
				}
				
				for (let key in this.form) {
					this.form[key] = detail[key]
				}
				if(this.form.shipping_type == 0){
					this.take=true
					this.delivery=true
				}else if(this.form.shipping_type == 1){
					this.take=false
					this.delivery=true
				}else if(this.form.shipping_type == 2){
					this.take=true
					this.delivery=false
				}
				
				this.threehbean = this.form.preferential_price*3
				this.isLoad = true
				
				this.$util.hideAll()
			},
			async colChange(e) {
				// 第一列，选择第一分类
				// if (e.detail.column == 0) {
					// let list = await this.$api.service.classList({
					// 	class_id: this.classList[0][e.detail.value].id
					// });
					// debugger
					this.form.one_classid = this.classList[e.detail.value].gc_id
					this.form.one_classid_name = this.classList[e.detail.value].gc_name
					console.log(this.form)
					// this.classList[1] = list
					// 强制视图更新
					// this.$set(this.classList, 1, list)
				// }
				// 第二列，选择第二分类
				// if (e.detail.column == 1) {
					// 选中二级分类id
					// this.form.two_classid = this.classList[e.detail.value].id
					// this.form.two_classid_name = this.classList[1][e.detail.value].name
				// }
			},
			industryChange(e) {
				this.industryIndex = e.detail.value;
				console.log(this.industryIndex);
				
			},
			addCommission() {
			  const id = new Date().getTime() // 生成唯一标识符
			  this.commission.push({ id })
			},
			changeRadio1() {
				this.form.verify_arrival = 1;
			},
			changeRadio2() {
				this.form.verify_arrival = 2;
			}, 
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				console.log(imagelist, e, "=====imgUpload")
				this.form[imgtype] = imagelist;
			},
		 checkboxChange(e) {
					console.log(e.detail.value)
					if (e.detail.value.includes("1") && e.detail.value.includes("2")){
						this.form.shipping_type = 0
					}else if(e.detail.value.includes("1")){
						this.form.shipping_type = 1
					}else if(e.detail.value.includes("2")){
						this.form.shipping_type = 2
					}else{
						this.form.shipping_type = ''
					}
					console.log(this.form.shipping_type==='')
		        } ,
			imgUpload2(e) {
				let {
					imagelist,
					imgtype,
					index
				} = e;
				console.log(imagelist, e, "=====imgUpload22")
				this.pictures_photo = imagelist
			},
			async toDel() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					title: '提示',
					content: "请确认是否要删除此数据?"
				})
				if (!confirm) return;
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let param = {
						goodsid: this.goodsid
					}
					await this.$api.mine.delGoods(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `删除成功`,
					});
					this.lockTap = false
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				if(Number(this.form.gc_id) == '')
				{
					uni.showToast({
						title:'分类不能为空'
					})
					return
				}
				if(Number(this.form.name) == '')
				{
					uni.showToast({
						title:'名称不能为空'
					})
					return
				}
				if(Number(this.form.name.length) > 20)
				{
					uni.showToast({
						title:'名称不能长于20'
					})
					return
				}
				if(Number(this.form.original_price) <= 0)
				{
					uni.showToast({
						title:'商品原价不能为空'
					})
					return
				}
				if(Number(this.form.cost_price) > Number(this.form.present_price))
				{
					uni.showToast({
						title:'厂家成本不能大于商品价格'
					})
					return
				}
				if((Number(this.form.cost_price)+Number(this.form.commission1)+Number(this.form.commission2)+Number(this.form.share_money))!=Number(this.form.present_price))
				{
					uni.showToast({
						title:'商品价格=厂家成本+运营A佣金+运营B佣金+分享佣金',
						icon:'none'
					})
					return
				}
				console.log(this.take)
				console.log(this.delivery)
				if(this.form.shipping_type === ''){
					uni.showToast({
						title:'配送方式不能空',
						icon:'error'
					})
					return
				}
				this.form.rebate = JSON.stringify(this.commission)
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param)
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				
				if(this.form.thumbs.length == 0){
					param.thumbs = ''
				} else {
					
					let thumstr = '';
					for(let ii=0; ii <this.form.thumbs.length;ii++){
						thumstr = thumstr+this.form.thumbs[ii].path+','
					}
					param.thumbs = thumstr
				}
				param.goodstype = this.industryIndex
				var pictures = []
				for (var i = 0; i < this.pictures_photo.length; i++) {
					var item = this.pictures_photo[i]
					pictures.push(item.path)
				}
				// debugger
				param.pictures = pictures
				
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					if (!this.goodsid) {
						await this.$api.mine.setGoods(param)
					} else {
						param.goodsid = this.goodsid
						await this.$api.mine.upGoods(param)
					}
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					})
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				
			},
			
			//自动计算抵扣幸福豆数量
			legumeauto()
			{
				this.form.preferential_price = this.form.original_price;
				this.threehbean = this.form.preferential_price*3;
			},
			legumeauto2()
			{
				this.form.present_price = this.form.cost_price;
				this.form.preferential_price = this.form.original_price-this.form.present_price;
				this.threehbean = this.form.preferential_price*3;
				
			},
			legumeauto3()
			{
				this.form.present_price = Number(this.form.cost_price)+Number(this.form.commission1)+Number(this.form.commission2)+Number(this.form.share_money);
				this.form.preferential_price = this.form.original_price-this.form.present_price;
				this.threehbean = this.form.preferential_price*3;
			}
		}
	}
</script>

<style lang="scss">
	.radio-content {
	  height: 60rpx;
	  display: flex;
	  align-items: center;
	}
	.radio {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 26rpx 0rpx 15rpx;
	}
	.radio-active{
	  width: 16rpx; 
	  height: 16rpx;
	  border-radius: 50%;
	  background-color: #0fbda6;
	}
	.radio-default{
	  border: 2rpx solid #0fbda6;
	}
	.radio-right {
	  margin-left: 66rpx;
	}
  
	.picker {  
	    background-color: #fff;  
	    padding: 10px;  
	    border: 1px solid #ddd;  
	    border-radius: 4px;  
	    margin-bottom: 10px;  
	}  
</style>
